<template>
    <div>
        <div class="pan" style="width:1280px;height:720px" id="divPan"></div>
    </div>
</template>

<script>
/*
    var mxgraph = require("mxgraph")({
    mxImageBasePath: "./src/images",
    mxBasePath: "./src"
    });
*/
import { mxGraph, mxCompactTreeLayout, mxFastOrganicLayout, mxHierarchicalLayout, mxConstants, mxEdgeStyle, mxGraphHandler } from 'mxgraph-js'
console.log(mxGraph)
export default {

  mounted () {
    // 创建画布
    var container = document.getElementById('divPan')
    var graph = new mxGraph(container)
    var parent = graph.getDefaultParent()
    // 开始更新画布
    graph.getModel().beginUpdate()
    graph.setConnectable(true)
    graph.setCellsLocked(false)
    graph.setHtmlLabels(true)
    // 连线的样式
    var style = graph.getStylesheet().getDefaultEdgeStyle()
    // style[mxConstants.STYLE_ROUNDED] = true;//圆角连线
    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector // 自己拐弯的连线
    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom
    mxGraphHandler.prototype.guidesEnabled = true

    var edstyle = graph.getStylesheet().getDefaultEdgeStyle()
    // edstyle[mxConstants.STYLE_ROUNDED] = true;
    edstyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector
    try {
      /*
                let vertexMap = {}
                for(let i=1; i< 10; i++){
                    vertexMap[i] = graph.insertVertex(parent, null, 'Hello' + i, 100, 60, 80, 30);
                    graph.insertEdge(parent, null, '', vertexMap[i], vertexMap[Math.floor(i/2)] ); // 构建一棵树
                }
                let layout = new mxFastOrganicLayout(graph);
                //layout.execute(parent);

                */
      // 插入节点
      // let v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
      // let v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
      const v1 = graph.insertVertex(parent, null, 'Hello,', 50, 40, 80, 30)
      const v2 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30)
      const v3 = graph.insertVertex(parent, null, 'World1!', 0, 0, 80, 30)

      // 插入连线
      graph.insertEdge(parent, null, '', v2, v1)
      graph.insertEdge(parent, null, '', v3, v1)

      // let lay = new mxFastOrganicLayout(graph);
      // lay.execute(parent)
    } finally {
      // 画布更新结束
      graph.getModel().endUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
